<template>
	<!-- 实名认证 -->
	<view class="realNameAuthentication-main">
		<view v-if="!isIdcard">
			<uni-forms :modelValue="formData">
				<uni-forms-item label="姓名" name="id_card_name">
					<uni-easyinput type="text" v-model="formData.id_card_name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" name="id_card">
					<uni-easyinput type="text" v-model="formData.id_card" placeholder="请输入身份证号" />
				</uni-forms-item>
			</uni-forms>
			<view class="bankCard-btn" :style="bottomStyle">
				<view class="btn" @click="getpayrealName">添加认证</view>
			</view>
		</view>
		<view v-else class="realNameAuthenticationBox">
			<view class="realNameAuthenticationBox-header">
				<text>实名信息</text>
				<uni-tag text="已实名" type="primary" size="mini"></uni-tag>
			</view>
			<view class="realNameAuthenticationItem">
				<view class="realNameAuthenticationItem-label">姓名：</view>
				<view class="realNameAuthenticationItem-info">
					{{ formData.name }}
				</view>
			</view>
			<view class="realNameAuthenticationItem">
				<view class="realNameAuthenticationItem-label">身份证号：</view>
				<view class="realNameAuthenticationItem-info">
					{{ formData.idcard }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { payrealName } from '../../api/payment/index.js';
import { userInfo } from '../../api/home/index.js';
import { validateIDCard } from '../../utils/tools.js';
export default {
	data() {
		return {
			formData: {
				id_card_name: '',
				id_card: ''
			},
			isIdcard: false,
			isShow: false
		};
	},
	onLoad() {
		this.getuserInfo();
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	methods: {
		// 提交认证
		async getpayrealName() {
			if (!this.formData.id_card_name) {
				return uni.showToast({
					title: '请输入身份证姓名',
					icon: 'none'
				});
			}
			if (!this.formData.id_card) {
				return uni.showToast({
					title: '请输入身份证号码',
					icon: 'none'
				});
			}
			if (!validateIDCard(this.formData.id_card)) {
				return uni.showToast({
					title: '身份证格式不正确',
					icon: 'none'
				});
			}
			try {
				const resData = await payrealName(this.formData);
				uni.showToast({
					title: '认证成功',
					icon: 'none'
				});
				await this.getuserInfo();
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/balance/balance'
					});
				}, 500);
			} catch (e) {
				throw Error(e);
			}
		},

		// 用户信息
		async getuserInfo() {
			try {
				const resData = await userInfo();
				if (resData.data.idcard) {
					this.isIdcard = true;
				} else {
					this.isIdcard = false;
				}
				this.formData = resData.data.idcard || {};
				this.$store.dispatch('getuserInfoAsync', {
					avatar: resData.data.avatar,
					nickname: resData.data.nickname,
					mobile: resData.data.mobile,
					idcard: resData.data.idcard
				});
			} catch (e) {
				throw Error(e);
			} finally {
				this.isShow = true;
			}
		}
	}
};
</script>

<style scoped lang="scss">
.realNameAuthentication-main {
	box-sizing: border-box;
	padding: 20rpx;
	.bankCard-btn {
		box-sizing: border-box;
		padding: 20rpx;
		padding-bottom: 0px;
		background-color: #fff;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		.btn {
			background-color: #e43927;
			color: #fff;
			height: 80rpx;
			border-radius: 8px;
			line-height: 80rpx;
			text-align: center;
		}
	}
}

.realNameAuthenticationBox {
	background-color: #fff;
	box-sizing: border-box;
	padding: 30rpx;
	padding-top: 0px;
	border-radius: 10rpx;
	.realNameAuthenticationBox-header {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: bold;
		width: 100%;
		border-bottom: 1px #f3f3f3 solid;
	}
}

.realNameAuthenticationItem {
	display: flex;
	height: 80rpx;
	align-items: center;
	font-size: 28rpx;
	.realNameAuthenticationItem-label {
		width: 160rpx;
		color: #999;
	}

	.realNameAuthenticationItem-info {
		color: #444;
	}
}
</style>
